.steward-weather {
	    padding: 0 ws(15);
	    height: ws(135);
	    background: linear-gradient(#2A89F8, #51B7FF);
	    display: flex;
	    justify-content: space-between;
	    position: relative;
	    overflow: hidden;
	    .steward-brimg{
	        width: ws(271);
	        position: absolute;
	        top: ws(-50);
	        left: 0;
	        z-index: 1;
	    }
	    .user {
	        padding-right: ws(15);
	        position: relative;
	        z-index: 2;
	        .user-name {
	            color: rgba($color, .7);
	            font-size: ws(31);
	            position: relative;
	            line-height: ws(40);
	            margin-top: ws(10);
	            overflow: hidden;
	              text-overflow:ellipsis;
	              white-space:nowrap;
	              width:ws(160);
	        }
	        .user-position { 
	            display: inline-block;
	            margin-top: ws(10);
	            padding: ws(1) ws(10);
	            border-radius: ws(20);
	            background-color: #6DBBF8;
	            color: rgba($color, .7);
	            box-shadow: 0 0 0 ws(1) rgba(#fff,.7);
	            font-size: ws(14);
	            margin-bottom: ws(10);
	            margin-left: ws(10);
	        }
	        .user-desc{
	             color: rgba($color, .7);
	            font-size: ws(16);
	            margin-left: ws(10);
	        }
	        
	        .time {
	            padding-top: ws(10);
	            color: rgba($color, .7);
	            font-size: ws(12);
	            position: relative;
	            &::after {
	                position: absolute;
	                content: '';
	                top: 0;
	                left: 0;
	                height: ws(1);
	                width: 100%;
	                background-color: rgba($color, .7);
	            }
	        }
	    }
	    .weather {
	        width: ws(170);
	        position: relative;
	        .temperature {
	            display: flex;
	            margin-bottom: ws(5);
	            view {
	                flex: 1;
	            }
	            .left {
	                font-size: ws(70);
	                color: rgba($color, .7);
	                position: relative;
	                line-height: ws(63);
	                .left-icon {
	                    position: absolute;
	                    top: 0;
	                    right: 0;
	                    width: ws(10);
	                    height: ws(10);
	                    border-radius: 50%;
	                    border: ws(2) solid rgba($color, .7);
	                }
	            }
	            .right {
	                padding-top: ws(3);
	                .humidity,
	                .temperature-max-min {
	                    color: rgba($color, .7);
	                    font-size: ws(14);
	                    display: flex;
	                    justify-content: space-between;
	                }
	            }
	        }
	        .result {
	            display: flex;
	            margin-top: ws(10);
	            padding-top: ws(15);
	            flex-direction: column;
	            color: rgba($color, .7);
	            position: relative;
	            font-size: ws(12);
	            &::after {
	                position: absolute;
	                content: '';
	                top: 0;
	                left: 0;
	                height: ws(1);
	                width: 100%;
	                background-color: rgba($color, .7);
	            }
	        }
	    }
	    .weather-iocn-btn {
	        display: flex;
	        justify-content: space-between;
	        view {
	            font-size: ws(12);
	            width: 47%;
	            color: rgba($color, .7);
	            height: ws(25);
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            box-shadow: 0 0 ws(5) rgba(#000, .1);
	            background-color: #70C3FD;
	            border-radius: ws(2);
	        }
	    }
	}
	
	
	.steward-notice {
	    display: flex;
	    align-items: center;
	    padding: ws(10) ws(15);
	    background-color: #F9F9F9;
	    .stewrd-icon {
	        width: ws(20);
	        height: ws(20);
	        image {
	            width: 100%;
				height: 100%;
	        }
	    }
	    .stewrd-warpper {
	        margin-left: ws(15);
	        .notice-txt {
	            color: #333;
				font-size: ws(18);
	        }
	        .notice-time {
	            margin-left: ws(10);
	            color: #B6B6B6;
	            font-size: ws(14);
	        }
	    }
	}
	
	.steward-task {
	    padding: ws(15);
	    .backlog {
	        padding: 0 ws(15);
	         box-shadow: 0 ws(1) ws(4) 0 rgba(7, 17, 27, 0.15);
	        border-radius: ws(5);
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        height: ws(85);
					background-color: #fff;
	        margin-bottom: ws(15);
	        .game_time {
	            margin-bottom: ws(-6);
	        }
	        .backlog-desc {
	            .num {
	                font-size: ws(24);
	            }
	            .piece {
	                font-size: ws(12);
	                color: #666;
					margin-left: ws(5);
	            }
	            .desc {
	                margin-left: ws(10);
	                color: #666;
	                font-size: ws(14);
	            }
	        }
	    }
	    .steward-list {
					width: 100%;
	        display: flex;
	        justify-content: space-between;
	        .item {
	            width: 42%;
	            padding: 0 ws(10);
	             box-shadow: 0 ws(1) ws(4) 0 rgba(7, 17, 27, 0.15);
	            border-radius: ws(5);
							background-color: #fff;
	            display: flex;
	            justify-content: space-between;
	            align-items: center;
	            height: ws(85);
	            .num {
	                font-size: ws(24);
	            }
	            .piece {
	                font-size: ws(12);
	                color: #666;
					margin-left: ws(5);
	            }
	            .desc {
	                font-size: ws(14);
	                color: #666;
	            }
	            .game_time {
	                margin-bottom: ws(-6);
	            }
	        }
	    }
	}
	
	.icon-list {
	    border-bottom: ws(15) solid #F9F9F9;
			background-color: #fff;
	    display: flex;
	    flex-wrap: wrap;
	    padding-bottom: ws(15);
	    .item {
	        width: 25%;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;
	        height: ws(70);
	        padding-top: ws(20);
	        .item-img {
	            width: ws(25);
	            height: ws(25);
	            display: flex;
	            align-items: center;
	        }
	        image {
	            width: 100%;
				height: 100%;
	        }
	        .item-title {
	            margin-top: ws(8);
	            font-size: ws(12);
	            color: #3e3e3e;
	        }
	    }
	}
	
	.canvas-container {
		width: ws(60);
		height: ws(60);
		position: relative;
		.canvas {
			width: ws(60);
			height: ws(60);
			position: absolute;
			top: 0;
			left: 0;
		}
	}
